<!DOCTYPE html>
<html>
<head>
<title>产品</title>
<#include "/header.html">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/jquery-ui.min.css">
	<script src="${request.contextPath}/statics/libs/jquery-ui.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/js/release/wangEditor.js"></script>

</head>
<body>
<div id="rrapp" v-cloak>
	<div v-show="showList">
		<div class="grid-btn">
			<div style="overflow-x:auto">
				<table style="border-collapse:separate; border-spacing: 10px;">

					<tr>
						<td class="col-sm-3">
							<#if shiro.hasPermission("sys:slideshow:save")>
								<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
							</#if>
								<#if shiro.hasPermission("sys:slideshow:update")>
								<a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
							</#if>
							<#if shiro.hasPermission("sys:slideshow:delete")>
								<a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
							</#if>
						</td>
					</tr>
				</table>

			</div>

		</div>
	    <table id="jqGrid"></table>
	    <div id="jqGridPager"></div>
    </div>

	<div v-show="!showList" class="panel panel-default">
		<div class="panel-heading">{{title}}</div>
		<div  class="form-horizontal">
			<div class="form-group">
				<div class="col-sm-2 control-label">产品品牌</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" style="cursor:pointer;" v-model="slideshow.brand" placeholder="产品品牌"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">产品名称</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" style="cursor:pointer;" v-model="slideshow.name" placeholder="产品名称"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">产品参考价</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" style="cursor:pointer;" v-model="slideshow.price" placeholder="产品参考价"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">描述</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" style="cursor:pointer;" v-model="slideshow.remark" placeholder="描述"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">是否上架</div>
				<div class="col-sm-10">
					<select  v-model="slideshow.status">
						<option value="1">上架</option>
						<option value="0">下架</option>
					</select>
				</div>
			</div>
<!--			<div class="form-group">-->
<!--				<div class="col-sm-2 control-label">币种</div>-->
<!--				<div class="col-sm-10">-->
<!--					<select id="slip44"  v-model="slideshow.slip44" @change="coinSelectFun">-->
<!--						<option value="">&#45;&#45;请选择&#45;&#45;</option>-->
<!--						<option v-for="coin in coinList" :value="coin.slip44">{{coin.symbol}}</option>-->
<!--					</select>-->
<!--					<input type="hidden" v-model="slideshow.symbol" />-->
<!--				</div>-->
<!--			</div>-->
			<div class="form-group">
				<div class="form-group" id="form">
					<div class="col-sm-2 control-label">图片上传</div>
					<div class="col-sm-10">
						<img style="width:180px;height:140px;" id="imageId"/>
						<input type="hidden" id="icon"   class="form-control" v-model="slideshow.icon" placeholder="图片地址"/>
						<div id="uploadForm">
							<input id="file" type="file" name="file"/>
							<input id="upload" type="button" class="btn btn-primary" @click="fileUpload" value="上传"/>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">排序</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model="slideshow.sort" placeholder="排序"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label"></div>
				<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
				&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
			</div>

		</form>
	</div>
</div>
<div id="Img" style="display: none;padding-left: 10px;padding-top: 10px;">
	<img id="showImg" alt="" src="" style="width: 620px;height: 390px;text-align:center; ">
</div>
<script>
	$(function () {

		var productEnum = {
			status:{
				1:"上架",
				0:"下架"
			}
		};

		var typeEnum = {
			type:{
				1:"家用电器",
				2:"品牌箱包",
				3:"生活用品",
				4:"保健产品"
			}
		};

		$("#jqGrid").jqGrid({
			url: baseURL + 'sys/product/list',
			datatype: "json",
			colModel: [
				{ label: 'id', name: 'id', index: "id", width: 45, key: true ,hidden:false, key: true  },
				{ label: '产品品牌', name: 'brand', index: "brand", width: 45},
				{ label: '产品名称', name: 'name', index: "name", width: 45},
				{ label: '产品描述', name: 'remark', index: "remark", width: 45},
				{ label: '币种简称', name: 'symbol', index: "symbol", width: 45},
				{ label: '类型', name: 'type', index: "type", width: 20,formatter: function (value) {
					return typeEnum.type[value]
				}},
				{ label: '缩略图', name: 'icon', width: 60 ,formatter: function(value, options, row){
						return "<img  style='width:30px;height: 30px;cursor:pointer;'  src='"+value+"'   onclick='shouImg(\""+value+"\")'></img>";
				 }},
				{ label: '排序', name: 'sort', index: "sort", width: 20},
				{ label: '状态', name: 'status', index: "status", width: 20,formatter: function (value) {
					return productEnum.status[value]
				}},
				{ label: '创建时间', name: 'createTime', width: 80 },
				{ label: '修改时间', name: 'updateTime', width: 80 }
			],
			viewrecords: true,
			height: 385,
			rowNum: 10,
			rowList : [10,30,50],
			rownumbers: true,
			rownumWidth: 25,
			autowidth:true,
			multiselect: true,
			pager: "#jqGridPager",
			jsonReader : {
				root: "page.list",
				page: "page.currPage",
				total: "page.totalPage",
				records: "page.totalCount"
			},
			prmNames : {
				page:"page",
				rows:"limit",
				order: "order"
			},
			gridComplete:function(){
				//隐藏grid底部滚动条
				$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
			}
		});
	});

	var setting = {
		data:{
			q:{
				articleTitle: null
			},
			showList: true,
			title:null,
			slideshow:{

			}
		},
	};
	var ztree;

	var vm = new Vue({
		el:'#rrapp',
		data:{
			q:{
				id: null,
				articleTitle:null
			},
			showList: true,
			title:null,
			slideshow :{

			},
			coinList: null
		},
		methods: {
			query: function () {
				vm.reload();
			},
			add: function(){
				vm.showList = false;
				vm.title = "新增";
				vm.slideshow = {id:null,symbol:"",  sort:null,  imageType:1,  icon:null,  createtime:null,  endtime:null,  name:null,skipId:null,status:1};
				vm.clear1();
			},

			update: function () {
				var id = getSelectedRow();
				if(id == null){
					return ;
				}

				vm.showList = false;
				vm.title = "修改";

				vm.getinfor(id);

			},
			del: function () {
				var id = getSelectedRows();
				if(id == null){
					return ;
				}

				confirm('确定要删除选中的记录？', function(){
					$.ajax({
						type: "POST",
						url: baseURL + "sys/product/delete",
						contentType: "application/json",
						data: JSON.stringify(id),
						success: function(r){
							if(r.code == 0){
								alert('操作成功', function(){
									vm.reload();
								});
							}else{
								alert(r.msg);
							}
						}
					});
				});
			},
			getCoins: function () {
				var url = baseURL + "/sys/coins/all";
				url += "?timestamp=";
				url += new Date().getTime();
				$.ajax({
					type: "GET",
					url: url,
					dataType: "json",
					async: true,
					success: function (result) {
						if (result && 0 == result.code) {
							console.log("%c%s", "color:red","result.data     : " + result.data[0].symbol); //undefined
							vm.coinList = result.data;
						} else {
							alert('获取币种列表失败');
						}
					},
					failure: function (result) {
						alert('failure: 获取币种列表失败');
					},
					error: function (result) {
						alert('error: 获取币种列表失败');
					}
				});
			},
			coinSelectFun: function(){
				vm.slideshow.symbol = $("#slip44 option:selected").text();
			},
			saveOrUpdate: function () {
				var url = "sys/product/update";
				var createtime =   $("#createtime").val();
				if(vm.slideshow.icon==""||vm.slideshow.icon==null){
					alert("图片不能为空！");
					return;
				}
				vm.slideshow.createtime = createtime;
				$.ajax({
					type: "POST",
					url: baseURL + url,
					contentType: "application/json",
					data: JSON.stringify(vm.slideshow),
					success: function(r){
						if(r.code === 0){
							alert('操作成功', function(){
								vm.reload();
							});
						}else{
							alert(r.msg);
						}
					}
				});
			},

			getinfor: function(id){
				$.get(baseURL + "sys/product/info/"+id, function(r){
					vm.slideshow = r.data;
					$("#createtime").val(r.data.createtime);
					$("#endtime").val(r.data.endtime);
					$("#imageId").attr("src",r.data.icon);
				});
			},
			clear1: function(){
				$("#url").val("");
			},
			reset:function(){
				vm.q = {status:"",createtime:null,endtime:null,imageType:""};
				$("input[name='qInput']").val('');
				vm.reload();

			},
			reload: function () {
				vm.showList = true;
				var page = $("#jqGrid").jqGrid('getGridParam','page');
				var createtime =   $("#q_endtime").val();
				var endtime = $("#q_endtime1").val();
				$("#jqGrid").jqGrid('setGridParam',{
					postData:{'status': vm.q.status,'describe': vm.q.describe,'createtime':createtime,'endtime': endtime,'imageType':vm.q.imageType},
					page:1
				}).trigger("reloadGrid");
			},
			fileUpload:function () {
				var formData = new FormData();
				formData.append('file', $('#file')[0].files[0]);
				$.ajax({
					url:baseURL + "sys/banner/fileUpload/",
					type: 'POST',
					cache: false,
					data: formData,
					processData: false,
					contentType: false
				}).done(function(res) {
					vm.slideshow.icon = res.path;
					if(res.status=="true"){
						$("#imageId").removeAttr("src");
						$("#imageId").attr("src",res.path);
					}
				}).fail(function(res) {});
			}
		},
		mounted : function () {
			// this.$options.methods.getCoins();
			// this.getCoins();
		}
	});

	function shouImg(val){
		$("#showImg").attr("src",val);
		layer.open({
			type: 1,
			skin: 'layui-layer-molv',
			title: "背景图",
			area: ['650px', '500px'],
			shade: 0,
			shadeClose: false,
			content: jQuery("#Img"),
			btn: ['确定'],
			btn1: function (index) {
				layer.close(index);
			}
		});
	}

</script>
</body>
</html>